import { Button, Message } from '@arco-design/web-react'
import { IconPaste, IconCodeBlock } from '@arco-design/web-react/icon'

import Editor from './editor'

import { useState, useEffect } from 'react'
import { atomModel } from '@/store'
import { useAtom } from 'jotai'
import { useTemplate, CodeTypes, useCopyHooks } from '@/hooks'

interface PropsType {
  type: string
}

export default function ProtoParse(props: PropsType) {
  const { type } = props
  const [protoString, setProtoString] = useState('')
  const [codeCreateString, setRpcCodeCreateString] = useState('')
  const [codeDeleteString, setRpcCodeDeleteString] = useState('')
  const [codeGetString, setRpcCodeGetString] = useState('')
  const [codeUpdateString, setRpcCodeUpdateString] = useState('')

  const [modelStuck] = useAtom(atomModel)

  const { parseToRrotoOrApi, parseToProtoOrApiCode } = useTemplate(type)

  useEffect(() => {
    if (modelStuck) {
      // proto
      setProtoString(parseToRrotoOrApi(modelStuck))
      // rpcCreate
      setRpcCodeCreateString(parseToProtoOrApiCode(modelStuck, CodeTypes.CREATE))
      //rpcDelete
      setRpcCodeDeleteString(parseToProtoOrApiCode(modelStuck, CodeTypes.DELETE))
      //rpcQuery
      setRpcCodeGetString(parseToProtoOrApiCode(modelStuck, CodeTypes.QUERY))
      // rpcUpdate
      setRpcCodeUpdateString(parseToProtoOrApiCode(modelStuck, CodeTypes.UPDATE))
    }
  }, [modelStuck])

  const parseSelectKeyToProto = () => {
    const contentString = parseToRrotoOrApi(modelStuck)
    setProtoString(contentString)
  }

  // 复制内容
  const copyToClipboard = async (str: string) => {
    const text = str.replaceAll('\n\n', '\n')
    return await useCopyHooks(text)
  }

  return (
    <div className="bg-white p-20px md:w-[calc(100vw-320px)] md:max-h-[calc(100vh-140px)] overflow-y-auto">
      {/* // 描述文件内容控制部分 */}
      <div className="align-center text-gray-6">
        <div className="mr-10px">
          <span className="" mr-5px>
            当前模型：
          </span>
          <span className="text-blue-6">{modelStuck?.modelName + '  解析----->'}</span>
        </div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconCodeBlock />}
          onClick={parseSelectKeyToProto}
        ></Button>
        <div className="ml-10px">当前为文件片段内容:</div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconPaste />}
          onClick={() => copyToClipboard(protoString)}
        ></Button>
      </div>
      <div className="h-240px overflow-y-auto w-80%">
        <Editor content={protoString} />
      </div>
      {/* // 创建内容代码部分 */}
      <div className="align-center text-gray-6 mt-10px">
        <div className="mr-10px">
          <span className="" mr-5px>
            当前模型：
          </span>
          <span className="text-blue-6">{modelStuck?.modelName + '  解析----->'}</span>
        </div>
        <div className="ml-10px">当前为创建代码片段内容:</div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconPaste />}
          onClick={() => copyToClipboard(codeCreateString)}
        ></Button>
      </div>
      <div className="h-200px overflow-y-auto w-80%">
        <Editor content={codeCreateString} />
      </div>
      {/* // 删除内容代码部分 */}
      <div className="align-center text-gray-6 mt-10px">
        <div className="mr-10px">
          <span className="" mr-5px>
            当前模型：
          </span>
          <span className="text-blue-6">{modelStuck?.modelName + '  解析----->'}</span>
        </div>
        <div className="ml-10px">当前为删除操作代码片段内容:</div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconPaste />}
          onClick={() => copyToClipboard(codeDeleteString)}
        ></Button>
      </div>
      <div className="h-200px overflow-y-auto w-80%">
        <Editor content={codeDeleteString} />
      </div>
      {/* // 查询内容代码部分 */}
      <div className="align-center text-gray-6 mt-10px">
        <div className="mr-10px">
          <span className="" mr-5px>
            当前模型：
          </span>
          <span className="text-blue-6">{modelStuck?.modelName + '  解析----->'}</span>
        </div>
        <div className="ml-10px">当前为查询代码片段内容:</div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconPaste />}
          onClick={() => copyToClipboard(codeGetString)}
        ></Button>
      </div>
      <div className="h-240px overflow-y-auto w-80%">
        <Editor content={codeGetString} />
      </div>
      {/* // 查询更新代码部分 */}
      <div className="align-center text-gray-6 mt-10px">
        <div className="mr-10px">
          <span className="" mr-5px>
            当前模型：
          </span>
          <span className="text-blue-6">{modelStuck?.modelName + '  解析----->'}</span>
        </div>
        <div className="ml-10px">当前为更新代码片段内容:</div>
        <Button
          type="text"
          shape="circle"
          className="w-100px"
          icon={<IconPaste />}
          onClick={() => copyToClipboard(codeUpdateString)}
        ></Button>
      </div>
      <div className="h-280px overflow-y-auto w-80%">
        <Editor content={codeUpdateString} />
      </div>
    </div>
  )
}
